<template>
  <div class="com-page">
    <div>websocket</div>
    <el-button @click="connect">connect</el-button>
    <el-button @click="send">send</el-button>
    <div>{{content}}</div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      ws: null,
      content: '',
    }
  },
  mounted() {},
  methods: {
    connect() {
      this.ws = new WebSocket('ws://localhost:9998')
      this.ws.onopen = () => {
        console.log('connect success')
      }
      this.ws.onmessage = (msg) => {
        this.content = msg.data
      }
      this.ws.onclose = (e) => {
        console.log('connection closed')
      }
    },
    send() {
      this.ws.send('msg from frontend')
    }
  },
}
</script>

<style>

</style>
